<template>
  <div class="studentbox">
    <div class="title">学员信息</div>
    <div class='student'>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="顺序"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width='90px'
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机"
          width='120px'
        >
        </el-table-column>
        <el-table-column
          prop="expend"
          label="消费金额"
          width='100px'
        >
        </el-table-column>
        <el-table-column
          prop="grade"
          label="会员等级">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
   data() {
        return {
          tableData: [{
            id: '1',
            name: '王小虎',
            phone:'1234567898',
            expend:'1234',
            grade: 3
          },
          {
            id: '1',
            name: '王小虎',
            phone:'1234567898',
            expend:'1234',
            grade: 3
          },
          {
            id: '1',
            name: '王小虎',
            phone:'1234567898',
            expend:'1234',
            grade: 3
          },
          {
            id: '1',
            name: '王小虎',
            phone:'1234567898',
            expend:'1234',
            grade: 3
          },
          {
            id: '1',
            name: '王小虎',
            phone:'1234567898',
            expend:'1234',
            grade: 3
          },
          {
            id: '1',
            name: '王小虎',
            phone:'1234567898',
            expend:'1234',
            grade: 3
          }]
        }
      }
}
</script>
<style lang="less" scoped>
  /deep/th{
    font-size: 16px;
    color: #333;
    font-weight: bold;
    font-family: '微软雅黑';
    text-align: center !important;
  }
  /deep/tr{
    .cell{
      text-indent:4px;
      text-overflow:clip;
      line-height: 18px;
    }
    &:nth-child(1),&:nth-child(2),&:nth-child(3){
      td:nth-child(1) .cell{
        text-indent:-3px;
        width: 18px;
        margin:0 20px;
        padding:0 12px;
        border-radius: 20px;
        color: white;
      }
    }
    &:nth-child(1) td:nth-child(1) .cell{
        background-color: orangered;
    }
    &:nth-child(2) td:nth-child(1) .cell{
        background-color:tomato;
    }
    &:nth-child(3) td:nth-child(1) .cell{
        background-color:salmon;
    }
  } 
  /deep/td{
    text-align: center !important;
  }
  .studentbox{
    width: 600px;
    height: 400px;
    background: #fff;
    position: relative;
    padding: 0 66px 48px 0;
    box-sizing: border-box
  }
  .student{
    margin-left: 64px;
  }
  .title{
    padding: 24px 0 4px 24px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    &::before{
      content: '';
      display: inline-block;
      background-color:#3c87fe;
      width: 4px;
      height: 21px;
      margin-right: 20px;
      vertical-align:sub;
    }
    &:hover,&:focus{
      color: #438afe;
    }
  }
</style>